<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no"/>
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
        <link rel="stylesheet" type="text/css" href="../../script/easydialog/easydialog.css" />
        <style>
            html, body {
                background-color: transparent !important;
                color: rgba(0,0,0,0.0)
            }
            .transparent_class {
                filter: alpha(opacity=50);
                -moz-opacity: 0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
            }
            .easyDialog_text ul li:nth-child(odd) {
                background: #ffffff;
                padding: 10px 0;
                font-size: 16px;
                border-radius: 5px;
                text-align: center;
            }
            .easyDialog_text ul li:nth-child(even) {
                background: #f3f5f6;
                padding: 10px 0;
                font-size: 16px;
                border-radius: 5px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--门禁列表-->
        <script id="doorDevice-template" type="text/x-dot-template">
            {{ for(var i=0, len=it.length; i < len; i++) {}}
            <li onclick="openDoor(this)" data-fsuid="{{=it[i].fsuid}}" data-devicecode="{{=it[i].devicecode}}" data-signal="{{=it[i].signal}}" data-name="{{=it[i].name}}">{{=it[i].name}}</li>
            {{ } }}
        </script>
        <div class="easyDialog_wrapper" id="easyDialogWrapper">
            <div class="easyDialog_content">
                <h4 class="easyDialog_title" id="easyDialogTitle" style="background-color: #db4537;color:#FFFFFF;">门禁列表 </h4>
                <div class="easyDialog_text" style="padding:0">
                    <ul id="doorDeviceList"></ul>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/config.js"></script>
    <script type="text/javascript" src="../../script/debug.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/easydialog/easydialog.js"></script>
    <script type="text/javascript">
        var doorDeviceList = null;
        apiready = function() {
            doorDeviceList = $api.getStorage('doorDeviceList')
            showSelectBox();
            $('#overlay,#closeBtn').click(function() {
                api.closeFrame();
            });
            console.log(getObj(api.pageParam));
        }
        function showSelectBox() {
            var content = $api.byId('doorDeviceList');
            var tpl = $api.byId('doorDevice-template').text;
            var tempFn = doT.template(tpl);
            content.innerHTML = tempFn(doorDeviceList);
            // console.log(getObj(doorDeviceList))
            easyDialog.open({
                container : 'easyDialogWrapper',
                fixed : true,
                drag : false
            });
        }

        function openDoor(el) {
            var pageParam = {
                fsuid : $(el).attr("data-fsuid"),
                devicecode : $(el).attr("data-devicecode"),
                signal : $(el).attr("data-signal"),
                devicename : $(el).attr("data-name"),
                stationName : api.pageParam.stationName
            };
            api.openWin({
                name : 'autoOpenDoor_win',
                url : '../autoOpenDoor_win.html',
                bounces : false,
                pageParam : pageParam
            });
        }
    </script>
</html>
